 window.onload = function (){

    function requestData(urlString, methods, parms) {
        return new Promise(function (res, rej) {
            $.ajax({
                url: urlString,
                // 请求类型是POST还是GET
                type: "GET",
                // 发送数据
                data: parms,
                // 超时时间
                timeout: 5000,
                // 返回数据类型json数据
                dataType: "json",
                // 异步还是同步 默认是异步，false表示同步
                async: true,
                success: function (data) {
                    res(data);
                },
                error: function (xhr, textStatus) {
                    console.log('错误1234567890');
                    console.log(xhr);
                    console.log(textStatus);
                }
            })
        });
    }


    function requestData2(urlString, methods, parms) {
        console.log(parms);
        return new Promise(function (res, rej) {
            $.ajax({
                url: urlString,
                // 请求类型是POST还是GET
                type: "GET",
                // 发送数据
                data: parms,
                // 超时时间
                timeout: 5000,
                // 返回数据类型json数据
                dataType: "json",
                // 异步还是同步 默认是异步，false表示同步
                async: true,
                success: function (data) {
                    res(data);
                },
                error: function (xhr, textStatus) {
                    console.log('错误');
                    console.log(xhr);
                    console.log(textStatus);
                }
            })
        });
    }
    $(function () {
        //1.1 访问API: 班级列表和指定的第一个班级的学生
        // var urlString = 'http://127.0.0.1:3000/users/getclasses';
        var urlString = '/users/getclasses';
        // var urlString2 = 'http://127.0.0.1:3000/students';
        var urlString2 = '/students';
        var c_datas = [];
        // 1.2 请求班级和请求默认的第一个班级的学生是一前一后的2次串行请求
        // 所以使用了 Promise 来实现异步串行任务，第二次请求条件，来源自第一次请求的结果
        requestData(urlString, "GET", null).then(data => {
            var init_cname = data.data[0].classname;
            $('span.class-name').html(init_cname);
            $('span.c-name').html(init_cname);
            // 动态刷新UI 刷新班级
            addClasses(data.data);
            save_value_to_storage('USERCID', data.data[0].id);
            requestData2(urlString2, "GET", { "cid": data.data[0].id }).then(data => {
                // 动态刷新UI 刷新学生列表
                showStudents(data.students);
            }).catch(err => console.log(err));
        }).catch(err => console.log(err));
        /*
        //1.2根据用户信息id 获取班级
        $.ajax({
            url: urlString,
            // 请求类型是POST还是GET
            type: 'GET',
            // 异步还是同步 默认是异步，false表示同步
            async: true,
            // 发送数据
            data: {},
            // 超时时间
            timeout: 5000,
            // 返回数据类型json数据
            dataType: 'json',
            // 成功返回处理
            success: function (data, textStatus, jqXHR) {
                //解析json数据
                console.log(data);
                console.log(textStatus);
                console.log(jqXHR);
                // 将用户id存放到本地

                // 跳转
                // window.location.href = 'index.html';
            },
            // 错误返回
            error: function (xhr, textStatus) {
                console.log('错误');
                console.log(xhr);
                console.log(textStatus);
            }
        });*/
        //测试 根据服务器返回数据添加班级
        //模拟网络获取班级信息
        // var c_datas = class_json;
        // var init_cname = c_datas.data[0].classname;
        // $('span.class-name').html(init_cname);
        // $('span.c-name').html(init_cname);
        // addClasses(c_datas.data);

        // var stus_arr = [students_json_01, students_json_02];
        // // 根据班级id去请求对应班级的所有学生
        // var studs = students_json_01;
        // showStudents(students_json_01.data);

        //左侧班级选项卡切换 
        $('.list-unstyled').on('click', '.data-item',function () {
            $('.data-item').removeClass('item-selector');
            $(this).addClass('item-selector');

            // var td_el = $(this).parent().parent().find("td");
            // console.log($(this).text());
            //设置显示的用户名和班级名在右侧对应的显示 
            $('span.class-name').html($(this).text());
            $('span.c-name').html($(this).text());

            // 移出当前显示的数据 
            $('#s-datas > tr').remove();
            // 根据当前 班级id 轮询数据找到对应的学生s 
            var select_class_name = $(this).text();
            requestData(urlString, "GET", null).then(data => {

                let classes = data.data;
                let item = classes.find(value => value.classname === select_class_name);
                save_value_to_storage('USERCID', item.id);
                requestData2(urlString2, "GET", { "cid": item.id }).then(data => {
                    showStudents(data.students);
                }).catch(err => console.log(err));
            }).catch(err => console.log(err));
        });

        // 添加学员
        $('#add-stu').on('click', function () {
            $('.edit-stu-info').eq(0).removeClass('e-hidden');
            $('.edit-stu-info').eq(0).addClass('e-show');
            $('.edit-header > span').html('添加学员');

            $('input.e-input').eq(0).val('');
            $('input.e-input').eq(1).val('');
            $('input.e-input').eq(2).val('');
            $('input.e-input').eq(3).val('');
            $('input.e-input').eq(4).val('');
            $('#u-select option').eq(0).text('男');
            $('#u-select option').eq(0).val('m');
            $('#u-select option').eq(1).text('女');
            $('#u-select option').eq(1).val('f');
        });

        //关闭窗口
        $('#edit-close').on('click', function (e) {
            $('.edit-stu-info').eq(0).removeClass('e-show');
            $('.edit-stu-info').eq(0).addClass('e-hidden');
        });

        //保存
        $('#e-save').on('click', function () {
            $('.edit-stu-info').eq(0).removeClass('e-show');
            $('.edit-stu-info').eq(0).addClass('e-hidden');

            var u_sex = $('#u-select option:selected').text(); //选中的文本
            var u_sex_val = $('#u-select option:selected').val(); //选中的值
            var sname =  $('input.e-input').eq(0).val();
            var snumber =  $('input.e-input').eq(1).val();
            var sphone = $('input.e-input').eq(2).val();
            var sage = $('input.e-input').eq(3).val();
            var smajor = $('input.e-input').eq(4).val();
            var cid = get_value_from_storage('USERCID');
            var data = {sname,snumber,sage,ssex: u_sex_val,sphone,smajor,cid};
            var select_string = $('.edit-header > span').html();
            if (select_string == "添加学员") {
                $.ajax({
                    // url: 'http://127.0.0.1:3000/students',
                    url: '/students',
                    // 请求类型是POST还是GET
                    type: 'POST',
                    // 异步还是同步 默认是异步，false表示同步
                    async: true,
                    // 发送数据
                    data: data,
                    // 超时时间
                    timeout: 5000,
                    // 返回数据类型json数据
                    dataType: 'json',
                    // 成功返回处理
                    success: function (data, textStatus, jqXHR) {
                        //解析json数据
                        console.log(data.data);
                        // 移出当前显示的数据 
                        $('#s-datas > tr').remove();
                        showStudents(data.data);
                    },
                    // 错误返回
                    error: function (xhr, textStatus) {
                        console.log('错误');
                        console.log(xhr);
                        console.log(textStatus);
                    }
                });
            } else if(select_string == "编辑学员信息"){
                $.ajax({
                    // url: 'http://127.0.0.1:3000/students',
                    url: '/students',
                    // 请求类型是POST还是GET
                    type: 'PUT',
                    // 异步还是同步 默认是异步，false表示同步
                    async: true,
                    // 发送数据
                    data: data,
                    // 超时时间
                    timeout: 5000,
                    // 返回数据类型json数据
                    dataType: 'json',
                    // 成功返回处理
                    success: function (data, textStatus, jqXHR) {
                        //解析json数据
                        console.log(data);
                        // 移出当前显示的数据 
                        $('#s-datas > tr').remove();
                        showStudents(data.data);
                    },
                    // 错误返回
                    error: function (xhr, textStatus) {
                        console.log('错误');
                        console.log(xhr);
                        console.log(textStatus);
                    }
                });
            } else {

            }
        });
    });

    function addClasses(objs) {
        for (let index = 0; index < objs.length; index++) {
            var li_el = $('<li></li>');
            li_el.addClass('data-item');
            if (0 == index) {
                li_el.addClass('item-selector');
            }

            li_el.html(objs[index].classname);

            $("#c-datas").append(li_el);
        }
    }
    function showStudents(objs) {
        for (let index = 0; index < objs.length; index++) {
            var item = objs[index];
            var tr_el = $('<tr></tr>');
            // tr_el.addClass('data-item');
            for (let i = 0; i < 8; i++) {
                var td_el = $('<td></td>');

                switch (i) {
                    case 0:
                        {
                            var input_el = $('<input type="checkbox"></input>');
                            td_el.append(input_el);
                            break;
                        }
                    case 7:
                        {
                            var input_edit_el = $(
                                '<input type="button" name="edit" value="编辑" class="btn" id="edit-stu" />');
                            var input_del_el = $(
                                '<input type="button" name="del" value="删除" class="btn" id="del-stu" style="background:#e15829;" />'
                            );
                            td_el.append(input_edit_el);
                            td_el.append(input_del_el);
                            break;
                        }
                    case 1:
                        {
                            td_el.html(item.truename);
                            break;
                        }
                    case 2:
                        {
                            td_el.html(item.sno);
                            break;
                        }
                    case 3:
                        {
                            td_el.html(item.tel);
                            break;
                        }
                    case 4:
                        {
                            if (item.gender == 'm') {
                                td_el.html('男');
                            } else {
                                td_el.html('女');
                            }

                            break;
                        }
                    case 5:
                        {
                            td_el.html(item.age);
                            break;
                        }
                    case 6:
                        {
                            td_el.html(item.major);
                            break;
                        }
                    default:
                        {
                            // td_el.html(i);
                            break;
                        }

                }
                tr_el.append(td_el);

            }
            $('#s-datas').append(tr_el);
        }

        //动态添加的 元素标签，需要使用on事件来绑定事件否则无效 
        $('[name="edit"]').on('click', function () {
            var td_el = $(this).parent().parent().find("td");
            console.log(td_el.eq(2).text());

            $('.edit-stu-info').eq(0).removeClass('e-hidden');
            $('.edit-stu-info').eq(0).addClass('e-show');
            console.log('gaodu :' + $('.right').eq(0).height());
            var edit_show_h = $('.right').eq(0).height();
            $('.edit-header > span').html('编辑学员信息');

            $('.edit-stu-info').eq(0).css('height', edit_show_h + 'px');

            $('input.e-input').eq(0).val(td_el.eq(1).text());
            $('input.e-input').eq(1).val(td_el.eq(2).text());
            $('input.e-input').eq(2).val(td_el.eq(3).text());
            $('input.e-input').eq(3).val(td_el.eq(5).text());
            $('input.e-input').eq(4).val(td_el.eq(6).text());

            if (td_el.eq(4).text() == '男') {
                $('#u-select option').eq(0).text('男');
                $('#u-select option').eq(0).val('m');
                $('#u-select option').eq(1).text('女');
                $('#u-select option').eq(1).val('f');
            } else {
                $('#u-select option').eq(0).text('女');
                $('#u-select option').eq(0).val('f');
                $('#u-select option').eq(1).text('男');
                $('#u-select option').eq(1).val('m');
            }

        });
        $('[name="del"]').on('click', function () {
            var cid = get_value_from_storage('USERCID');
            var td_el = $(this).parent().parent().find("td");
            console.log(td_el.eq(2).text());
            var data = { snumber: td_el.eq(2).text(),  cid };
            var _that = $(this);
            $.ajax({
                // url: 'http://127.0.0.1:3000/students',
                url: '/students',
                // 请求类型是POST还是GET
                type: 'DELETE',
                // 异步还是同步 默认是异步，false表示同步
                async: true,
                // 发送数据
                data: data,
                // 超时时间
                timeout: 5000,
                // 返回数据类型json数据
                dataType: 'json',
                // 成功返回处理
                success: function (data, textStatus, jqXHR) {
                    //解析json数据
                    console.log(data);
                    // 移出当前显示的数据 
                    // $('#s-datas > tr').remove();
                    // showStudents(data.data);
                    _that.parent().parent().remove();
                },
                // 错误返回
                error: function (xhr, textStatus) {
                    console.log('错误');
                    console.log(xhr);
                    console.log(textStatus);
                }
            });            
        });
    }
}